<template>
  <!-- US HK  CN   美股  港股   沪深/深沪 -->
  <div class="footer">
    <div class="footer_center f-cb">
      <div class="dapanStatus">
        <div class="dapanImg" v-if="HKImg.statusStr">
          <img :src="HKImg.img" alt />
          <b>{{ HKImg.statusStr }}</b>
        </div>
        <div class="dapanImg" v-if="USImg.statusStr">
          <img :src="USImg.img" alt />
          <b>{{ USImg.statusStr }}</b>
        </div>
        <div class="dapanImg" v-if="CNImg.statusStr">
          <img :src="CNImg.img" alt />
          <b>{{ CNImg.statusStr }}</b>
        </div>
      </div>
      <div class="footer_img" @mouseover="selectStyle" @mouseout="outStyle">
        <swiper
          :key="HKList.length"
          :options="swiperOption"
          ref="mySwiper"
          class="swipers"
          v-if="HKList.length > 0"
        >
          <swiper-slide>
            <img :src="HKImg.img" alt />
          </swiper-slide>
          <swiper-slide>
            <img :src="USImg.img" alt />
          </swiper-slide>
          <swiper-slide v-if="CNImg.statusStr">
            <img :src="CNImg.img" alt />
          </swiper-slide>
        </swiper>
        <dl>
          <dd @click="imgslideTo('0')">
            <img :src="HKImg.img" alt />
            <b>{{ HKImg.statusStr }}</b>
          </dd>
          <dd @click="imgslideTo('1')">
            <img :src="USImg.img" alt />
            <b>{{ USImg.statusStr }}</b>
          </dd>
          <dd @click="imgslideTo('2')">
            <img :src="CNImg.img" alt />
            <b>{{ CNImg.statusStr }}</b>
          </dd>
          <dd @click="stopLoop">
            {{ $t("m.Smart_carousel") }}({{ $t("m.Start") }})
          </dd>
        </dl>
      </div>
      <div class="f-cb dapanInfo">
        <swiper
          :key="HKList.length"
          :options="swiperOption"
          ref="mySwiperList"
          class="swipersList"
          v-if="HKList[0].detail.symbol"
        >
          <swiper-slide class="itemInfo">
            <div
              class="f-cb data"
              v-for="(item, index) in HKList"
              :key="index"
              @click="dapan(item.detail)"
            >
              <h2 v-if="item.detail">
                {{ lang == "zh-CN" ? item.detail.name : item.detail.name_en }}
              </h2>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ Number(item.detail.latestPrice).toFixed(2) }}
              </p>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ item.detail.gain > 0 ? "+" : ""
                }}{{
                  Number(item.detail.latestPrice - item.detail.close).toFixed(2)
                }}
              </p>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ item.detail.gain > 0 ? "+" : ""
                }}{{ Number(item.detail.gain * 100).toFixed(2) }}%
              </p>
            </div>
          </swiper-slide>
          <swiper-slide class="itemInfo">
            <div
              class="f-cb data"
              v-for="(item, index) in USList"
              :key="index"
              @click="dapan(item.detail)"
            >
              <h2>
                {{ lang == "zh-CN" ? item.detail.name : item.detail.name_en }}
              </h2>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ Number(item.detail.latestPrice).toFixed(2) }}
              </p>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ item.detail.gain > 0 ? "+" : ""
                }}{{
                  Number(item.detail.latestPrice - item.detail.close).toFixed(2)
                }}
              </p>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ item.detail.gain > 0 ? "+" : ""
                }}{{ Number(item.detail.gain * 100).toFixed(2) }}%
              </p>
            </div>
          </swiper-slide>
          <swiper-slide class="itemInfo">
            <div
              class="f-cb data"
              v-for="(item, index) in CNList"
              :key="index"
              @click="dapan(item.detail)"
            >
              <h2>
                {{ lang == "zh-CN" ? item.detail.name : item.detail.name_en }}
              </h2>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ Number(item.detail.latestPrice).toFixed(2) }}
              </p>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ item.detail.gain > 0 ? "+" : ""
                }}{{
                  Number(item.detail.latestPrice - item.detail.close).toFixed(2)
                }}
              </p>
              <p
                :class="
                  item.detail.gain > 0
                    ? 'red'
                    : item.detail.gain == 0
                    ? ''
                    : 'green'
                "
              >
                {{ item.detail.gain > 0 ? "+" : ""
                }}{{ Number(item.detail.gain * 100).toFixed(2) }}%
              </p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="footer_right">
      <Time></Time>
    </div>
  </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { get_grail_index, post_open_time } from "@/assets/js/API/market.js";
import Time from "./timeList.vue";
export default {
  components: {
    swiper,
    swiperSlide,
    Time,
  },
  data() {
    return {
      USImg: {
        img: require("../../assets/img/image_usd.png"),
      },
      HKImg: {
        img: require("../../assets/img/image_HKD.png"),
      },
      CNImg: {
        img: require("../../assets/img/image_hs.png"),
      },
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 0,
        loop: true,
        noSwiping: true,
        height: 45,
        autoplay: {
          speed: 5000,
          delay: 6000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        direction: "vertical",
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        onSlideChangeEnd: function (swiper) {
          swiper.update();
          swiper.startAutoplay();
          swiper.reLoop();
        },
      },
      USList: [{ detail: {} }, { detail: {} }, { detail: {} }],
      HKList: [{ detail: {} }, { detail: {} }, { detail: {} }],
      CNList: [{ detail: {} }, { detail: {} }, { detail: {} }],
      wsDapanList: [],
      openTimesList: [],
      lang: "zh",
      timeClick: null,
    };
  },
  created() {
    this.lang = localStorage.getItem("lang");
    this.openTimes();
  },
  beforeDestroy() {
    // window.clearInterval(this.timeClick); //关闭
    // this.timeClick = null;
    // if (this.time) { //如果定时器还在运行 或者直接关闭，不用判断
    // }
  },
  methods: {
    async setVal() {
      // this.timeClick = setInterval(() => {
      await this.dapanList("US", "USList");
      await this.dapanList("HK", "HKList");
      await this.dapanList("CN", "CNList");
      this.$store.dispatch("SetWsDapanList", this.wsDapanList);
      // }, 4000);
    },
    // swiper插件
    Swiper() {
      this.swipers = this.$refs.mySwiper.$swiper;
      this.swiperList = this.$refs.mySwiperList.$swiper;
    },
    // 智能轮播
    stopLoop() {
      this.swipers.autoplay.start();
      this.swiperList.autoplay.start();
    },
    selectStyle() {
      $(".footer_img dl").stop().slideDown(500);
    },
    outStyle() {
      $(".footer_img dl").stop().slideUp(500);
    },
    // 轮播切换
    imgslideTo(index) {
      index = Number(index);
      this.swipers.slideTo(index + 1, 1000, false);
      this.swiperList.slideTo(index + 1, 1000, false);
      // 点击暂停轮播
      this.swipers.autoplay.stop();
      this.swiperList.autoplay.stop();
    },
    dapan(item) {
      if (item.market === "HKEX") this.$router.push("/hk_Market");
      if (item.market === "US") this.$router.push("/us_Market");
      if (item.market === "CN") this.$router.push("/sh_Market");
    },
    // ws大盘数据过滤
    dapanFilter(data) {
      if (!data) return false;
      let value = {
        market: data[0],
        securityType: data[1],
        symbol: data[3],
        latestPrice: data[4],
        chg: data[4] - data[8],
        close: data[8],
        gain: (data[4] - data[8]) / data[8],
      };
      return value;
    },
    //  股票大盘接口 /api/Quotation/grailIndex
    async dapanList(obj, list) {
      const res = await get_grail_index({ type: obj });
      if (res.code != 1) return this.$message.error(res.msg);
      this[list] = res.data.list;
      res.data.list.forEach((element) => {
        let wsObj = new Object();
        this.$set(wsObj, "market", element.detail.market);
        this.$set(wsObj, "securityType", element.detail.securityType);
        this.$set(wsObj, "action", "Q");
        this.$set(wsObj, "symbol", element.detail.symbol);
        this.wsDapanList.push(wsObj);
      });
    },
    //  开盘状态接口
    async openTimes() {
      const res = await post_open_time();
      if (res.code != 1) return this.$message.error(res.msg);
      this.USImg = Object.assign({}, this.USImg, res.data.US);
      this.HKImg = Object.assign({}, this.HKImg, res.data.HK);
      this.CNImg = Object.assign({}, this.CNImg, res.data.CN);
      // 未开盘时无推送，需手动请求http接口
      // this.Swiper();
    },
  },
  mounted() {
    this.setVal();
  },
  computed: {
    swipers() {
      return this.$refs.mySwiper.swiper;
    },
    swiperList() {
      return this.$refs.mySwiperList.swiper;
    },
  },
  watch: {
    "$store.state.wsModel.daPanDetail": {
      handler(val, old) {
        if (val != "") {
          let vals = JSON.parse(val);
          // 当前是香港大盘
          if (vals[0] == "HKEX") {
            for (let i = 0; i < this.HKList.length; i++) {
              if (this.HKList[i].detail.symbol == vals[3]) {
                this.$nextTick(() => {
                  Object.assign(this.HKList[i].detail, this.dapanFilter(vals));
                });
                break;
              }
            }
          }
          // 美股
          if (vals[0] == "US") {
            for (let i = 0; i < this.USList.length; i++) {
              if (this.USList[i].detail.symbol == vals[3]) {
                this.$nextTick(() => {
                  Object.assign(this.USList[i].detail, this.dapanFilter(vals));
                });
                break;
              }
            }
          }
          // 沪深
          if (vals[0] == "SSE" || vals[0] == "SZSE") {
            for (let i = 0; i < this.CNList.length; i++) {
              if (this.CNList[i].detail.symbol == vals[3]) {
                this.$nextTick(() => {
                  Object.assign(this.CNList[i].detail, this.dapanFilter(vals));
                });
                break;
              }
            }
          }
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
.swipers {
  color: @fff;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 8px 10px 8px 60px;
  // z-index: 10;
  background: @sideColor;
  .footer_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .dapanStatus {
      display: flex;
      align-items: center;
      min-width: 243px;
      flex-wrap: nowrap;
      .dapanImg {
        padding-right: 10px;
        color: @fbSix;
        font-size: 12px;
        img {
          margin-right: 5px;
        }
      }
    }
    .footer_img {
      position: relative;
      padding-right: 23px;
      padding-left: 10px;
      background: url(~@/assets/img/icon_XS.png) no-repeat 86% center;
      background-size: 16px;
      width: 40px;
      cursor: pointer;
      .swipers {
        height: 40px;
        position: relative;
        cursor: pointer;
        img {
          margin-top: 11px;
        }
      }
      dl {
        width: 120px;
        position: absolute;
        bottom: 42px;
        background: @sideColor;
        display: none;
        transform: all 0.3s;
        z-index: 99;
        dd {
          padding: 10px;
          cursor: pointer;
          // width: 100%;
          font-size: 12px;
          color: @fff;
          display: flex;
          &:last-child {
            border-top: 1px solid @Dark_gray;
          }
          b {
            font-weight: normal;
            padding-left: 5px;
            display: inline-block;
          }
        }
      }
    }
    .dapanInfo {
      // max-width: 700px;
      .swipersList {
        position: relative;
        height: 40px;
        max-width: 900px;
        .itemInfo {
          padding-left: 10px;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          margin-bottom: 0 !important;
          cursor: pointer;
          .data {
            display: flex;
            align-items: center;
            height: 40px;
            h2 {
              font-size: 12px;
              color: @fff;
              line-height: 24px;
              padding-right: 5px;
            }
            p {
              font-size: 12px;
              line-height: 24px;
              padding-right: 5px;
              color: @fff;
            }
          }
        }
      }
    }
  }
}
.footer_center img,
.footer_img dl img {
  max-height: 22px;
}
.footer_img.on dl {
  display: block;
  transform: all 0.3s;
}
.footer_right {
  float: right;
  width: 230px;
  padding-left: 10px;
  background: url(~@/assets/img/icon_XS.png) no-repeat 100% center;
  background-size: 22px;
  color: @fff;
  font-size: 12px;
}
</style>